<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 京东商城登录页面 </title>
    <style>

        *{
            margin: 0;
            padding: 0;
        }



        header{
            margin: 10px auto;
            padding: 10px 200px;
            vertical-align: text-bottom;
        }

        h2{
            margin-top: 0;
            margin-left: 15px;
            display: inline-block;
            color: #666666;
        }

        header > img{
            vertical-align: middle;
        }

        .section{
            height: 600px;
            background: url(./image/banner.png) center no-repeat;
            background-size: cover;
        }

        
        .box{
            width: 300px;
            height: 250px;
            color: #666666;
            background-color: white;
            float: right;
            margin-right: 150px;
            margin-top: 60px;
        }

        .box h4{
            padding: 20px 25px;
            float: left;
        }

        .box .p0{
            color: red;
            background: url(./image/icon5.jpg)  20px no-repeat;
            font-size: 12px;
            padding: 20px 25px;
            float: right;
        }

        .box .div1{
            
            text-align: center;
        }

        .box .div1 .k1{
            width: 250px;
            height: 30px;
            font-size: 14px;
            color: #999999;
            background: url(./image/icon1.jpg) left no-repeat;
            border: 1px solid #BDBDBD;
            text-align: center;
        }

        .box .div1 .k2{
            margin: 20px auto;
            width: 250px;
            height: 30px;
            background: url(./image/icon2.jpg) left no-repeat;
            border: 1px solid #BDBDBD;
        }

        .box .div2{
            padding: 0 25px;
            margin-bottom: 20px;
            font-size: 14px;
        }

        .box .p2{
            float: right;
        }

        .box .p3{
            margin: 10px auto;
            width: 250px;
            height: 25px;
            color: white;
            background-color: red;
            text-align: center;
        }

        footer{
            margin-top: 10px;
            font-size: 14px;
            text-align: center;
            line-height: 30px;
        }

    </style>
</head>
<body>
    <header>
        <img src="./image/jdlogo.png" alt="">
        <h2>欢迎登录</h2>
    </header>

    <section class="section">
        
        <div class="box">
            <h4>京东会员</h4>
            <p class="p0">&nbsp;&nbsp;&nbsp;&nbsp;立即注册</p><br><br><br>
            <div class="div1">
                <input id="name1" name="name1" class="k1" type="text" value="邮箱/用户名/已验证手机">
                <input id="name1" name="name1" class="k2" type="text">               
            </div>
    
            <div class="div2">
                
                <input id="zddl" name="zddl" type="checkbox" value="1"><label for="zddl">自动登录</label>  
                <p class="p2">忘记密码?</p>
            </div>         
            <p class="p3">登 录</p>
        </div>
        
    </section>

    <footer>
        <p>关于我们| 联系我们| 人才招聘| 商家入驻| 广告服务| 手机京东| 友情链接| 销售联盟| 京东社区| 京东公益| English Site</p>
        <p>Copyright?2004-2017 京东JD.com 版权所有</p>
    </footer>
</body>
</html>

